//引入清除默认样式
@use './reset.scss';
// @use './virtualTable.scss';

.main1{
    background: var(--el-bg-color-overlay); 
    border-radius: 6px;
    height: 100%;
    overflow: hidden;
    padding: 0 20px;
    // color: var(--el-text-color-regular);
    // font-size: 12px;    
    .main__header{
        margin:20px 5px 0; height: 28px;
    }
    .main__body{
        margin-top: 15px;
        height: calc(100% - 63px);
        overflow: auto;
        display: flex;
        flex-direction: column;
    }
}

.mainLR{ display: flex; overflow: hidden; height: 100%;
    &>*{background: var(--el-bg-color-overlay); border-radius: 6px;}
    .mainL{
        margin-right: 10px;
        padding: 0 20px;
        .mainL__header{margin:20px 5px 0; height: 28px;}
        .mainL__body{
            margin-top: 15px;
            height: calc(100% - 63px);
            overflow: auto;
            display: flex;
            flex-direction: column;
        }
        .mainL__body-btm15{
            margin-top: 15px;
            height: calc(100% - 78px);
            overflow: auto;
            display: flex;
            flex-direction: column;
        }
    }
    .mainR{
        padding: 0 20px;        
        .mainR__header{ 
            margin:20px 5px 0;    
            height: 28px;
        }
        .mainR__body {
            margin-top: 15px;
            height: calc(100% - 63px);
            overflow: auto;
            display: flex;
            flex-direction: column;
        }
        .mainR__body-btm15 {
            margin-top: 15px;
            height: calc(100% - 78px);
            overflow: auto;
            display: flex;
            flex-direction: column;
        }
        .mainR__defalut{
            margin-top: 20px;
            height: calc(100% - 20px);
            overflow: auto;
            display: flex;
            flex-direction: column;
        }
    }        
}

.main2{ display: flex;
    &>*{background: var(--el-bg-color-overlay); border-radius: 6px;}
    .mainL{  margin-right: 10px; padding: 10px;
        .hd{ display: flex; align-items: center; padding-bottom: 10px; color: var(--el-text-color-primary);}
        .top{ display: flex; align-items: center; padding-bottom: 10px;
            &>*{ padding:3px; border-radius: 6px; text-align: center;
                &:hover{ background-color: var(--el-color-info-light-8);}
                .tit1{ font-size: 12px; display: block; color: var(--el-color-info); margin-top: 3px; transform: scale(0.9);}
            }
        }
        .con{ overflow: auto; height: calc(100% - 100px);
            li{  position: relative;}
            .conMain{ padding: 8px; height: 60px; box-sizing: border-box; border-radius: 6px; display: flex;align-items: center; position: relative; cursor: pointer; margin-bottom: 5px;
                &:hover{ background-color: var(--el-color-info-light-8); 
                    .checkPart{ display: block;}
                }
                .checkPart{ display: none; position: absolute; right: 8px; top: 0; height: 60px; padding-top: 20px; text-align: right; width: 90px; background-color: var(--el-color-info-light-8);
                    .checkIcon{ 
                        &:hover{ color: var(--el-color-primary);}
                    }
                }
                .titPart{ margin-left: 8px; flex: 1;
                    .tit1{ display: block; font-size: 14px; margin-bottom: 5px; color: var(--el-text-color-primary);
                        .timePart{  font-size: 12px; color: var(--el-color-info); float: right;}
                    }
                    .tit2{ font-size: 12px; color: var(--el-color-info);}
                }
                
            }
        }
    }
    .mainR{ flex:1;
        .hd{ padding: 15px; border-bottom: 1px solid var(--el-color-info-light-8);
            .tit1{ margin-left: 10px; color: var(--el-text-color-primary); font-size: 16px; font-weight: bold;}
        }
    }
}
.round{ width: 36px; height: 36px; line-height: 36px; display: inline-block; text-align: center; font-size: 12px; border-radius: 50%; color: #fff;
    &.success{ background-color: var(--el-color-success);}  
    &.warning{ background-color: var(--el-color-warning);}  
    &.danger{ background-color: var(--el-color-danger);}
    &.primary{ background-color: var(--el-color-primary);}    
}
.p-t-xs{ padding-top: 5px;}
.m-r-xs{ margin-right: 5px;}
.m-r-sm{ margin-right: 10px;}
.m-r-md{ margin-right: 15px;}
.m-r-lg{ margin-right: 20px;}
.m-l-xs{ margin-left: 5px;}
.m-l-sm{ margin-left: 10px;}
.m-l-md{ margin-left: 15px;}
.m-l-lg{ margin-left: 20px;}
.m-b-xs{ margin-bottom: 5px;}
.m-b-sm{ margin-bottom: 10px;}

.partTitle {    
    height: 28px;
    line-height: 28px;
    align-items: center;
    display: flex;
    font-size: 14px;
    color:var(--el-text-color-primary);
    font-weight: 600;
    margin-bottom: 10px;

    .isChartShow {
        cursor: pointer;
        display: flex;
        margin-left: 5px;
    }
}
.partTitle::before {
    display: inline-flex;
    border-radius: 6px;
    width: 6px;
    height: 16px;
    background-color: var(--el-color-primary);
    content: "";
    margin-right: 10px;
}
h2.detailsTitle {
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    padding-top: 5px;
    color: var(--el-text-color-primary);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--el-border-color-light);
}
.twoPart{ overflow: hidden;
    .el-form-item{ width: 48%; float: left;
        // &:nth-of-type(odd){ margin-right: 2%;}
        &:nth-of-type(even):after{ content: ''; display: block; clear: both;}
    }
}
.clearfix::after{ content: ''; display: block; clear: both;}

.el-form .threePart {
    display: flex;
    align-items: center;
    gap: 20px; /* 使表单项之间有间距 */
    &>*{ width: calc((100% - 40px)/ 3);}
}

//全局element样式覆盖
.el-form-item {
    width: calc(100% - 25px);

    .el-form-item__content {
        &>.textTip {
            opacity: 1;
            transition: all 0.3s;
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 20px; 
            position: absolute; 
            top: 30px; 
            left: 0;
            font-size: 12px;
        }
    }

    &.is-error {
        .el-form-item__content {
            &>.textTip {
                opacity: 0;
            }
        }
    }
}
.el-cascader-node{
    margin: 0 5px;
    border-radius: 6px;
    font-size: 13px;    
}
.el-cascader-node:not(.is-disabled):hover, .el-cascader-node:not(.is-disabled):focus {
    background: var(--el-fill-color) !important;
}
body {
    //下拉选择器样式
    .el-select-dropdown{
        padding: 5px 0;
    }
    .el-select-dropdown__list{
        padding: 0 5px;
    }
    .el-select-dropdown__item.is-hovering {
        background-color: var(--el-fill-color);
        border-radius: 6px;
    }
    //树形
    .el-tree-node__content:hover {
        background-color: var(--el-fill-color);
        border-radius: 6px;
    }
}
.pull-left{ float: left;}
.pull-right{ float: right;}
.inline-block{ display: inline-block;}
// 用户管理-右侧搜索栏

.searchItem{ margin-bottom: 15px; display: flex;
    .searchTit{ width: 60px; font-size: 13px; line-height: 26px; color: var(--el-text-color-regular);}
}
// 来源
.sourceTag{ display: inline-block; color: #fff; background-color: #FE5D5B; max-width: 44px; height: 22px; line-height:22px; border-radius: 6px; text-overflow:ellipsis; white-space:nowrap; padding: 0 10px; font-size: 12px;
    &.tag13{ background-color: #FF972C;}
    &.tag11{ background-color: #2367DE;}
    &.tag12{ background-color: #00B9B9;}
    &.tag10{ background-color: #B37FEB;}
    &.tag14{ background-color: #4CA1FB;}
    &.tag15{ background-color: #722ED1;}
    &.tag30{ background-color: #7c7c7c;}
}
.hdTitle{ font-size: 12px; display: inline-block; margin-right: 10px; color: var(--el-text-color-primary); vertical-align: middle; text-align: right; width: 60px;} 
.hdTitle13{ font-size: 13px; display: inline-block; margin-right: 10px; color: var(--el-text-color-primary); vertical-align: middle; text-align: right; width: 65px;} 
.myElIcon{ cursor: pointer; z-index: 999;
    .el-icon{ font-size: 16px;
        &:hover{ color: var(--el-color-primary);}
    }
}
.logic-tree .el-select .el-select__wrapper{ height: 28px;}
.text-center {
    text-align: center;
}
.event-button{
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
}
.myTable.vxe-table--render-default{  
    .vxe-header--column:not(.col--ellipsis){ height: 22px; line-height: 22px; padding: 8px 0;user-select: none; font-size: 13px; background-image: none; 
        .custom-sort{ position: relative; top: 3px; display: inline-block; margin-left: 4px;}
        .vxe-cell--filter{  padding: 0 3px; position: relative; top: -2px;}
    }
    &.is--padding .vxe-body--column:not(.col--ellipsis){ height: 22px; padding: 8px 0;}
    .vxe-table--filter-wrapper{ min-width: 200px; font-size: 13px; padding: 5px;
        &.is--multiple>ul>li{ padding: 5px 10px; margin-bottom: 3px;font-size: 13px;}
        .vxe-table--filter-body{ max-height: 200px!important;}
        .vxe-table--filter-template{ padding: 5px 8px 10px;
            input{ width: 100%; font-size: 13px; line-height: 22px; padding-left: 6px;}
        }
    }
}
.dashDetailMenu{ color: var(--el-text-color-regular); font-size: 15px;
    .sub-menu{ padding-left: 20px;}
    .menu-item-wrapper{ display: flex; justify-content: space-between; line-height: 32px; user-select: none; /* 标准语法 */ -webkit-user-select: none; /* Safari 和 Chrome */ cursor: pointer; padding-left: 10px;
        .expandedPart{ flex: 1; display: grid; align-items: center; justify-content: end;}
        .titleLeft{ position: relative; font-size: 13px; height: 32px; max-width: calc(100% - 13px);
            .titleName{ display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
            &.active{ color: var(--el-color-primary);
                &:before{
                    content:''; position: absolute; left: -10px; top: 50%; transform: translate(0, -50%); width: 3px; height: 14px; background-color: var(--el-color-primary);
                    border-radius: 4px;  // 上左圆角
                }
            }
        }
    }
}
.dashboardCon{
    .topBase{ height: 100px; background-color: #608DFA; display: flex; align-items: center; color: #fff; justify-content: space-between;
        .leftText{ display: flex; align-items: center;
            .svgPic1{ margin: -7px 20px 0 30px;}
            .title{ font-family: '阿里巴巴普惠体';
                .chTitle{ font-size: 23px; display: block; margin-bottom: 5px;}
                .enTitle{ font-size: 12px;}
            }
        }
        .rightText{ font-size: 16px; padding-right: 30px; display: flex; align-items: center;
            .timeSelect .el-input__wrapper{
                border-color: transparent;
                box-shadow: none;
                background: transparent;
                cursor: pointer;
                font-size: 16px;
                .el-input__prefix{
                    color: #fff;
                }
                .el-input__inner{
                    color: #fff;
                    cursor: pointer;
                    font-size: 16px;
                }
            }
            .datePart1{ overflow: hidden; width: 129px; font-size: 16px; font-family: inhert;
                &>*{ float: left;}
            }
            .week{ display: inline-block; margin: 0 20px 0 0; font-size: 15px;}
            .svgPic2{ position: relative; cursor: pointer;}
        }
    }
    .con1{ padding: 10px 15px; display: flex;
        .chartL{ width: 300px; height: 520px; border: 10px; background-color: rgba(96,141,250,.15); margin-right: 10px; border-radius: 6px; display: flex; flex-direction: column; align-items: center;
            .dashedLine { width: 280px; height: 0; border-top: 1px dashed var(--el-border-color-dark);}
            .chart1{ display: flex; flex-direction: column; align-items: center; flex: 1;
                .txt1{ font-size: 14px; color: #608DFA; margin-top: 35px; font-weight: bold;}
                .txt2{ font-size: 24px; color: #F3AA18; margin-top: 10px; font-weight: bold;}
            }
        }
        .chartR{  display: flex; flex-direction: column; width: calc(100% - 290px);
            .chart2{ display: flex; margin-bottom: 10px;
                .liInfo{ flex: 1; height: 110px; border-radius: 6px; padding: 15px; color: #fff;
                    &.liInfo1{ background: linear-gradient(90deg, #F0A715, #FF972C 100%); margin-right: 10px;}
                    &.liInfo2{ background: linear-gradient(90deg, #6A8CF2, #2474FF 100%); margin-right: 10px;}
                    &.liInfo3{ background: linear-gradient(90deg, #59BCB6, #43B6AF 100%);}
                    .txt1{ font-size: 14px; display: block; margin: 15px 0;}
                    .txtBox{ font-size: 24px; overflow: hidden;}
                    .svgPic3{ margin-left: 3px;}
                }
            }
            .chart3{ border: 1px solid var(--el-border-color-light); flex: 1; border-radius: 6px; padding: 0 10px;
                .title{ display: flex; justify-content: space-between; padding: 15px 10px; border-bottom: 1px dashed var(--el-border-color-light); font-size: 15px; color: var(--el-text-color-primary);
                    .titName{ line-height: 28px; font-weight: bold;}
                    .typeSelect{ width: 150px;}
                    .typeCut{ width: 150px; color:var(--el-text-color-regular); font-size: 13px; height: 28px; padding-top: 6px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--el-border-color); padding-left: 11px;}
                }
            }
        }
    }
    .con2{  border: 1px solid var(--el-border-color-light); border-radius: 6px; padding: 6px; margin: 0 15px 10px; padding: 0 20px;
        .conI{ margin-top: 20px;
            .titlePart{ position: relative; display: flex; align-items: center;
                .titIcon{ margin-right: 10px; display: inline-block; vertical-align: middle; position: relative; top: 1px;}
                .titTxt{ font-size: 15px; color: var(--el-text-color-primary); font-weight: bold;}
                .myExport{ position: absolute; right: 0; top: 0;
                    a{ display: block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--el-border-color); text-align: center; line-height: 28px;
                    --textPart-icon-color:var(--el-text-color-regular); 
                        &:hover{ --textPart-icon-color: var(--el-color-primary); border-color: var(--el-color-primary);}
                    } 
                }
            }
            .tablePart{ margin-top: 20px;}
        }
    }
    .el-table th.el-table__cell{
        background-color: var(--el-fill-color-light);
    }
    .el-table .last-row{
        background-color: var(--el-fill-color-light);
        font-weight: 600;    
    }
    .typeSelect .el-select__placeholder{
        color: var(--el-text-color-primary);
    }
}
.dashboardCon.onlyTable .con2{
    margin: 0;
    border: none;
}
.blue-background {
    background-color: #bccef1!important;
    color: #303133!important;
}
.lfCon1 {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .lfCon1-item {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
}
.indexGroup{
    .titlePart{    
        border: 1px solid var(--el-border-color-light);
        border-radius: 4px;
        height: 57px;
        padding: 13px 0 0 20px;
        background-color: var(--el-color-primary-light-9);
        color:var(--el-color-primary);
        font-size:14px;
        font-weight: 600;
    }
    .contentPart{    
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;    
        border: 1px solid var(--el-border-color-light);
        margin-top: -20px;
        padding-top: 20px;
        background-color: var(--el-bg-color-overlay);
    }
    .tab-container {
        .tabs {
            display: flex;
            align-items: center;
        }
    
        .tab-item {
            cursor: pointer;
            padding: 10px;
            transition: color 0.3s;
            color: var(--el-text-color-primary);
        }
    
        .tab-item.active {
            color: var(--el-color-primary);
            /* 选中时为蓝色 */
        }
    
        .divider {
            width: 1px;
            height: 20px;
            background-color: #ccc;
            margin: 0 10px;
        }
    }
}

.main__body.customize{
    .el-table{
        .el-table__body-wrapper
        {
            tbody tr td:nth-of-type(9) .cell{
                overflow: initial!important;
            }
        } 
    }
}
/* 部门选择-自定义树形选择器下拉菜单的宽度 */
.dept-tree-select {  min-width: 200px!important;
    .el-tree{ width: 100%!important;}
}
.securiteType-tree-select {  min-width: 200px!important;
    .el-tree{ width: 100%!important;}
}
// 自定义弹框公共样式
.dropdown-group-selector {
    position: relative;
    margin-right: 3px;
}

.dropdown-list {
    position: absolute;
    top: 32px;
    left: -20px;
    right: 0;
    padding: 15px;
    border-radius: 4px;
    height: 160px;
    width: 350px;
    overflow-y: auto;
    z-index: 99;
    background-color: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-light);
    .group-title {
        font-size: 14px;
        margin-bottom: 15px;
        color: var(--el-text-color-primary);
        font-weight: bold;
    }
    ul {
        margin-bottom: 10px;
        overflow: hidden;

        li {
            display: inline-block;
            margin-right: 5px;
            cursor: pointer;
            margin-bottom: 10px;

            &:nth-of-type(3) {
                margin-right: 112px;
            }

            &:hover .el-tag {
                color: var(--el-color-primary);
            }

            &.active .el-tag {
                color: var(--el-color-primary);
                border-color: var(--el-color-primary);
            }
        }
    }
}
.primarySign{     
    border: 1px solid var(--el-color-primary);
    padding: 2px 4px;
    border-radius: 2px;
    color: var(--el-color-primary);
    line-height: 1rem;
}
.textTip{ 
    font-size: 12px; 
    color: var(--el-text-color-placeholder);
}
.indexSet {
    display: flex;
    height: 100%;
    .mainL {
        border-right: 1px solid var(--el-border-color-light);
        padding: 0 0 0 15px;
        height: calc(100% - 20px);
        margin-top: 10px;
        width: 300px;  
        
        .dropdown-group-selector{
            margin: 0;
            .el-button {
                padding: 0 10px;
                :deep(span){
                    height: 27px;
                }
            }
            .group-title {
                line-height: 14px;
            }
        }
        
        .mt-4 {
            padding: 5px 15px 7px 0;
        }

        .el-collapse {
            border-color: transparent !important;
            --el-collapse-header-height: 40px;
            --el-collapse-header-text-color: var(--el-text-color-regular);
            padding: 5px 15px 0 0;

            :deep(.el-collapse-item__arrow) {
                margin: 0px;
            }

            :deep(.el-collapse-item__content) {
                padding-bottom: 10px;
            }
        }

        .titlePart {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 255px;
            .titName{
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            }
            .iconBtn {
                cursor: pointer;
                border: none;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                margin-right: 10px;
                display: flex;
                align-items: center;
                background-color: var(--el-color-info-light-9);

                &:hover {
                    background-color: var(--el-color-info-light-5);
                }
            }

        }

        .partContent {        
            .staticIndicator, .independence{
                &.active {
                    background-color: var(--el-color-success-light-9);
                    outline-color: var(--el-color-success-light-3);
                }
            }
            .dynamicIndicator, .joint{
                &.active {
                    background-color: color-mix(in srgb, #626aef 20%, var(--el-bg-color-overlay) 80%);
                    outline-color: color-mix(in srgb, #626aef 70%, var(--el-bg-color-overlay) 30%);
                }
            }
            .staticIndicator::before{
                content:'静';             
                background-color: var(--el-color-success);
            }
            .dynamicIndicator::before{
                content:'动';             
                background-color: #626aef;
            }
            .independence::before{
                content:'独';             
                background-color: var(--el-color-success);
            }
            .joint::before{
                content:'联';             
                background-color: #626aef;
            }

            li {
                padding: 8px 8px 8px 20px;
                line-height: 20px;
                cursor: pointer;
                margin-bottom: 5px;
                display: flex;
                justify-content: space-between;            
                border-radius: 4px;
                outline: 1px solid var(--el-border-color-light);
                outline-offset: -1px; /* 向内偏移 */
                position: relative;            

                .textPart {
                    width: 188px;
                    display: flex; 
                    align-items: center;
                }

                .title {
                    flex: 1;
                    margin-left: 10px;
                }

                .rightPart {
                    text-align: right;
                    display: none;
                    width: 45px;

                    .el-icon {
                        font-size: 16px;
                        margin-right: 5px;
                        vertical-align: middle;

                        &:last-of-type {
                            margin-right: 0;
                        }
                    }
                }

                &:hover {
                    background-color: var(--el-fill-color);                

                    .rightPart {
                        display: flex;
                        align-items: center;
                        align-items: center;
                        justify-content: flex-end;
                    }
                }            

                &:last-of-type {
                    margin-bottom: 0;
                }
            }
            li::before {            
                font-weight: 600;
                color: white;     
                position: absolute;
                left: 0; /* 新增 */
                top: 50%; 
                transform: translate(0, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 20px; /* 建议加大宽度 */
                height: 100%;                        
                border-radius: 4px 0 0 4px; /* 匹配父元素圆角 */
            }
        }
    }

    .mainR {
        padding: 10px 0 10px 15px;
        width: calc(100% - 300px);
    } 
}

.detailPage {
    .twoPart{
        display: flex;
        & > *{ width: calc((100% - 40px)/2);}
    } 
    .detailsContent {
        margin: 10px 20px;
    }
    .detailItem {
        margin: 5px 10px;
        display: flex;
        line-height: 22px;
        .detailTit {
            color: var(--el-text-color-regular);
            font-size: 14px;
            font-weight: bold;
        }
        .detailCon {
            font-size: 14px;
            color: var(--el-text-color-regular);
            flex: 1;
            word-break: break-all;
        }
    }
}
.modalTitle{
    display: flex;
    align-items: center;
    span{
        margin-left: 10px;
        color: var(--el-text-color-primary);
        height: 24px;
        line-height: 24px;  
        font-size: 15px;                        
        font-weight: bold;
    }
}
// 表格中详情图标
.detailIcon{ display: inline-block; font-size: 15px; position: relative; top: 3px; margin-right: 5px;}
.myIcon{ font-size: 16px; cursor: pointer; vertical-align: middle;
    &:hover{ color: var(--el-color-primary);}
}
.optPart{ position: relative;
    .myIcon{ position: absolute; right: 0; top: 3px;}
}
// 溢出省略号
.cellEllipsis{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.uploadIcon{ font-size: 20px; color: var(--el-color-primary); cursor: pointer; margin-top: 5px;}
.detailForm .el-form-item{ margin-bottom: 5px;};
